<template>
  <div class="toplist">
    <!-- 飙升榜的ID -->
    <SongListContent :listId="list[0].id"></SongListContent>
    <!-- 新歌榜的ID -->
    <SongListContent :listId="list[1].id"></SongListContent>
    <!-- 原创榜的ID -->
    <SongListContent :listId="list[2].id"></SongListContent>
  </div>
</template>

<script>
import SongListContent from '@/components/SongListContent.vue'
export default {
  data() {
    return {
      list: []
    }
  },
  components: {
    SongListContent
  },
  created() {
    this.getListId()
  },
  methods: {
    // 为了获取三个榜单的ID
    async getListId() {
      const { data: res } = await this.$http.get('/toplist/detail')
      this.list = res.list
      this.list = this.list.splice(0, 3)
      console.log(this.list)
    }
  }
}
</script>

<style scoped>
.toplist {
  height: 100%;
  background-color: #f5f5f5;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
</style>
